<template>
    <div class="assessment">
        <Header :bigDataTitle="bigDataTitle" @openMenu="openMenu" @navback="navback"/> 
        <div class="rankTop">
            <p class="p1">排行榜</p>
            <p class="p2">统计时间 {{currentTime}}
                <mu-date-input v-model="value1" type="month" container="dialog" @change="changeValue" ></mu-date-input>
            </p>
            <p class="selectMonth" >
                <span :class="{'active':status==2}" @click.stop="changeStatus(2)" v-if="type!=2">年榜</span>
                <span :class="{'active':status==1}" @click.stop="changeStatus(1)" v-if="type!=2">月榜</span>

                <!--<span :class="{'active':state==2}" @click.stop="chaneState(2)" style="margin-left: 16px" v-if="type!=2&&type!=0">本集团</span>-->
                <span class="zhibu" :class="{'active':state==1}" @click.stop="chaneState(1)" v-if="type!=2&&type!=0">支部</span>
                <span  v-if="type==2" class="examRoom" >{{examSelect}}
                <mu-select  v-model="normal.value" @change="changeExamRoom" >
                    <mu-option v-for="(item,index) in examRoom" :key="index" :label="item.title" :value="item.id"></mu-option>
                </mu-select>
                </span>
            </p>
        </div>
        <div class="rankContent" >
            <div class="rankTab">
                <span :class="{'active':type==0}" @click.stop="changeType(0)">支部排行</span>
                <span :class="{'active':type==3}" @click.stop="changeType(3)">党员排行</span>
                <span :class="{'active':type==2}" @click.stop="changeType(2)">考试排行</span>
                <span :class="{'active':type==1}" @click.stop="changeType(1)">学习排行</span>
            </div>
            <div class="rankContentWrap" v-if="!noData">
                <div class="rankContentList">
                    <ul v-if="type==0">
                        <li class="flex" v-for="(item,i) in rankList" :key="i">
                            <span class="sp1" :class="{'first':i==0,'second':i==1,'third':i==2}" v-if="i<=2"></span>
                            <span class="sp1"  v-if="i>2">{{i+1}}</span>
                            <div class="name flex-1 flex align-center" style="margin-left: 30px">
                               {{item.org_name}}
                                <!--<img :src="item.photo" alt="">-->
                            </div>
                            <b >{{item.grade_num}} <cite>分</cite></b>
                        </li>

                    </ul>
                    <ul v-if="type!=2&&type!=0">
                        <li class="flex" v-for="(item,i) in rankList" :key="i">
                            <span class="sp1" :class="{'first':i==0,'second':i==1,'third':i==2}" v-if="i<=2"></span>
                            <span class="sp1"  v-if="i>2">{{i+1}}</span>
                            <div class="name flex-1 flex align-center">
                                <img :src=item.photo||defaultAvatar alt="">
                                <div class="flex-userInfo ">
                                    <p > {{item.name}}</p>
                                    <p>{{item.org_name}}</p>
                                </div>
                            </div>
                            <b >{{item.grade_num}} <cite>分</cite></b>
                        </li>

                    </ul>
                    <ul v-if="type==2">
                        <li class="flex" v-for="(item,i) in ScoreList" :key="i">
                            <span class="sp1" :class="{'first':i==0,'second':i==1,'third':i==2}" v-if="i<=2"></span>
                            <span class="sp1"  v-if="i>2">{{i+1}}</span>
                            <span class="name flex-1 flex align-center">
                                <img :src=item.photo||defaultAvatar alt="">
                                <div class="user-name">
                                    <p class="p-name">{{item.name}}</p>
                                     <p class="p-time">{{transformTime(item.time_consuming)}}</p>
                                </div>
                            </span>
                            <b >{{item.fraction}} <cite>分</cite></b>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="noData" v-if="noData">
                <span>暂无数据</span>
            </div>
        </div>
    </div>
</template>
<script>
    import {formatMonth} from '../utils'
    import Header from  '@/views/home/components/header.vue';
    import {mapState,mapMutations} from 'vuex';
    export default{
        data(){
            return{
                bigDataTitle:'考核信息',
//                open: false,
                position: 'right',
                currentTime:'',
                type:0,
                status:1,
                state:1,
                rankList:[],
                ScoreList:[],
                value1:'',
                noData:false,
                examSelect:'考场筛选',
                examId:'',
                defaultAvatar:'https://media.71ydj.com/FvSE_SRijRPJ-Qkti8sHfYr1W9zH#',
                normal:{
                    value:''
                }
            }
        },
        computed:{
            ...mapState({
                open:state=>state.initHomeData.open.open,
                orgArray:state=>state.initHomeData.orgArray
            })
        },
        methods:{
            ...mapMutations(['openHomeMenu']),
            openMenu(){
                this.openHomeMenu({
                    open:!this.open
                })
            },
            changeValue(e){
                console.log(e)
                this.currentTime =formatMonth(e.getTime());
                this.census_time =parseInt(e.getTime()/1000);
                this.getData()
            },
            //时间转换
            transformTime(e){
                console.log(e)
                var h = parseInt(e/3600);
                var m =h>0? parseInt((e-h*3600)/60):parseInt(e/60);
                var s ='';
                if(h>0){
                    if(m>0){
                       s=e-h*3600-m*60
                    }else{
                        s=e-h*3600
                    }
                }else{
                    if(m>0){
                        s=e-m*60
                    }else{
                        s=e
                    }
                }
                if(h>0){
                    return h+'时'+m+'分'+s+'秒'
                }else{
                    return m+'分'+s+'秒'
                }
            },
            changeExamRoom(e){
                this.examRoom.forEach(((ele,index)=>{
                    if(ele.id==e){
                        this.examSelect=ele.title;
                        this.examId=e;
                    }
                }))
                this.getExamData(this.examId)
            },
            getExamData(id){
                this.$http.get('/applets/TestInfo/rank_list',{
                    id,
                    org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
                    phone:JSON.parse(Cookies.get('user_71ydj')).phone
                }).then((res)=>{
                    console.log(res.data.rank_list)
                    if(res.data.rank_list.length){
                        this.ScoreList =res.data.rank_list;
                        this.noData =false
                    }else{
                        this.noData =true
                    }
                })
            },
            //获取考场列表
            getRomm(){
               this.$http.get('/applets/TestInfo/exam_scene_list',{
                   org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
                   phone:JSON.parse(Cookies.get('user_71ydj')).phone
               }).then((res)=>{
                   console.log(res.data)
                   this.examRoom =res.data;
               })
            },
            chaneState(state){
              this.state=state;
              this.getData()
            },
            changeStatus(status){
                this.status=status;
                if(this.type==0){
                        this.getBranchData()
                }else{
                    this.getData()
                }

            },
            changeType(type){
                this.type=type;
                if(type!=2){
                    if(type==0){
                        //支部排行榜
                        this.getBranchData()
                    }else{
                        this.getData();
                    }
                }else{
                   console.log(this.examRoom)
                    if(this.examRoom.length){
                        this.examSelect=this.examRoom[0].title;
                        this.examId=this.examRoom[0].id;
                        this.getExamData( this.examId)
                    }else{
                        this.noData =true
                    }
                }

            },
            getBranchData(){
                this.$http.get('app/DataVisualization/integral_rank',{
                    org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
                    status:this.status,
                    census_time:this.census_time
                }).then((res)=>{
                    if(res.code=='200'){
                        if(res.data.rank.length){
                            this.rankList =res.data.rank;
                            this.noData =false
                        }else{
                            this.noData =true
                        }
                        console.log(this.rankList)
                    }
                })
            },
            getData(state,status,org_id,type,census_time){
                this.$http.get('/applets/StudyPlay/study_rank',{
                        state:this.state,
                        status:this.status,
                        type:this.type,
                        org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
                        census_time:this.census_time
                }).then((res)=>{
                    if(res.code=='200'){
                        if(res.data.rank.length){
                            this.rankList =res.data.rank;
                            this.noData =false
                        }else{
                            this.noData =true
                        }
                        console.log(this.rankList)
                    }
                })
            },
            navback(){
                this.$router.go(-1);
            }
        },
        components:{
            Header
        },
        mounted(){
            if(!Cookies.get('user_71ydj')){
                this.$router.push({
                    path:'/mine'
                })
                return false
            }
            this.$progress.done();
            this.getBranchData();
            this.getRomm();
            this.currentTime =formatMonth(+new Date().getTime());
            this.census_time =parseInt(+new Date().getTime()/1000);

        }
    }
</script>
<style lang="scss" scoped="">
    @import '../base2.scss';
    .assessment{
        color: white;
        min-height: 100vh;
        background: #183377;
        margin-top: 45px;
        .rankTop{
            height: 162px;
            margin: 0 -16px;
            background-image: url("../img/shuju_rank_bg@2x.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            .p1{
                font-weight: bold;
                font-size: 32px;
                color: rgba(8, 186, 233, 1);
                padding-top: 29px;
                vertical-align: top;
                margin-left: 16px;
            }
            .p2{
                color: rgba(8, 186, 233, 1);
                font-size: 14px;
                /*padding-top: 11px;*/
                margin-bottom: 15px;
                vertical-align: top;
                margin-left: 16px;
                position: relative;
                .mu-input{
                    position: absolute;
                    left: 0;
                    top:0;
                    width: 100%;
                    height: 100%;
                    opacity:0;
                    min-height: auto;
                }
            }
            .selectMonth{
                vertical-align: top;
                margin-left: 16px;
                span{
                    vertical-align: top;
                    color: rgba(8, 186, 233, 1);
                    font-size: 14px;
                    display: inline-block;
                    background: rgba(0, 0, 0, 0.2);
                    padding: 3px 5px;
                    &.zhibu{
                        margin-left: 20px;
                    }
                    &.active{
                        background: rgba(8, 186, 233, 1);
                        color: rgba(0, 45, 116, 1);
                        /*margin-right: 20px;*/
                    }
                    &.examRoom{
                        position: relative;
                        .mu-input{
                            position: absolute;
                            left: 0;
                            top:0;
                            width: 100%;
                            height: 100%;
                            opacity:0;
                        }
                    }
                }
            }
        }
        .rankContent{
            margin: 0 -16px;
            .rankTab{
                height: 50px;
                background: rgba(0,0,0,0.1);
                span{
                    display: inline-block;
                    width: 25%;
                    height: 100%;
                    line-height: 50px;
                    text-align: center;
                    vertical-align: top;
                    color: rgba(8, 186, 233, 0.2);
                    font-size: 14px;
                    &.active{
                        color: rgba(8, 186, 233, 1);
                        font-size: 18px;
                    }
                }
            }
            .rankContentWrap{
                position: relative;
                display: block;
                height: auto;
                min-height:calc( 100vh -100px);
                .rankContentList{
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top:0;
                    background: #183377;
                    ul{
                        li{
                            width: 100%;
                            height: 69px;
                            line-height: 69px;
                            font-size: 16px;
                            color: #fff;
                            border-bottom: 1px solid rgba(255,255,255,0.1);
                            .sp1{
                                margin-left: 16px;
                                text-align: center;
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 19px 18px;
                                width: 18px;
                                font-size: 16px;
                                color: rgba(0, 228, 255, 1);
                                &.first{
                                    background-image: url("../img/shuju_paihang_1.png");
                                }
                                &.second{
                                    background-image: url("../img/shuju_paihang_2.png");
                                }
                                &.third{
                                    background-image: url("../img/shuju_paihang_3.png");
                                }
                            }
                            .name{
                                font-size: 14px;
                                color: white;
                                white-space: wrap;
                                word-break: break-all;
                                line-height: 1;
                                .flex-userInfo{
                                    /*display: inline-block;*/
                                    /*height: 100%;*/
                                    /*vertical-align: top;*/
                                    p{
                                        line-height: 1;
                                        &:nth-child(1){
                                            font-size: 14px;
                                        }
                                        &:nth-child(2){
                                            font-size:12px;
                                            font-family:PingFang SC;
                                            font-weight:500;
                                            color:rgba(255,255,255,1);
                                            line-height:20px;
                                            opacity:0.2;
                                            margin-top: 7px;
                                        }
                                    }
                                }
                                img{
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 50%;
                                    margin-left: 28px;
                                    margin-right: 15px;
                                }
                                .user-name{
                                    line-height: 1;
                                    .p-name{
                                        font-size: 14px;
                                        color: white;
                                        margin-bottom: 7px;
                                        margin-top: 10px;
                                    }
                                    .p-time{
                                        font-size: 12px;
                                        color: rgba(255,255,255,0.2);
                                    }
                                }
                            }
                            b{
                                width: 100px;
                                margin-right: 16px;
                                font-weight: normal;
                                font-size: 20px;
                                text-align: right;
                                color: rgba(255, 198, 61, 1);
                                cite{
                                    font-style: normal;
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>